<%@ page contentType="text/html; charset=utf-8" %>

<%@ include file="/WEB-INF/jsp/includeCss.jsp"%>
<%@ include file="/WEB-INF/jsp/includeJs.jsp"%>
<%@ include file="/WEB-INF/jsp/includeTaglib.jsp"%>


<table width="100%" border="0" cellpadding="0" cellspacing="5">
  <tr>
    <td valign="top">
      <table class="dbborder" width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="bottom" class="blueTableBg">&nbsp;我的计划任务&nbsp;-&nbsp;新增角色任务目标</td>
        </tr>
        <tr>
          <td>
            <table width="100%" border="0" cellpadding="0" cellspacing="5">
              <tr>
                <td>
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td class="dashTopLeft"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                      <td class="dashTop" width=100%><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                      <td class="dashTopRight"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                    </tr>
                    <tr>
                      <td class="dashLeft"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                      <td align="center">
                      	<form id="userRoleTaskForm" method="post">
                        <table width="100%" border="0" cellpadding="0" cellspacing="3">
                          
                          
                          <tr>
                            <td width="114" height="20" class="globalText">角色名称</td>
                            <td height="20" class="globalText">
                            	<select id="selRole" name="roleId">
                            		<c:forEach var="role" items="${roles}" varStatus="status">
                            			<option value="${role.id}">${role.name}</option>
                            		</c:forEach>
                            	</select>
                            </td>
                          </tr>
                          <tr>
                            <td width="114" height="20" class="globalText">项目及任务信息</td>
                            <td height="20" class="globalText">
                            	<input type="button" class=" btnStyle" value="+任务目标" onclick="javascript:addProject()" />
                            </td>
                          </tr>
                          <tr>
                            <td colspan="2">
                            	<table id="mainTable" width="100%" border="0" cellpadding="0" cellspacing="3">
                            	</table>
                            </td>
                          </tr>
                          <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                          </tr>
                          <tr>
                            <td align="center" colspan="2">
                              <table border="0" cellpadding="0" cellspacing="2">
                                <tr>
                                  <td><input type="button" class="btnStyle" value="  保存  " onclick="javascript:doSubmit()"></td>
                                </tr>
                              </table>
                            </td>
                          </tr>
                         
                        </table>
                         </form>
                      </td>
                      <td class="dashRight"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                    </tr>
                    <tr>
                      <td class="dashBottomLeft"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                      <td class="dashBottom" width=100%><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                      <td class="dashBottomRight"><img src="<c:url value='/images/spacer.gif' />" width="7" height="7"></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>



<div style="display:none;">
		<table>
								  <tr id="projectTr" >
		                          	<td colspan="2">
		                          		<table class="dbborder" width="100%" border="0" cellpadding="0" cellspacing="1">
								         <tr class="rowHead">
								           <td colspan="5" width="25%" height="20" nowrap align="center" class="globalTextBold">
								           		任务
								           		<input name="taskName" class="required" readonly="readonly" id="project_name_" type="text" />
								           		<input projectIndex="" jobId="" class="dynamic btnStyle" type="button" value="选择任务" onclick="var a=window.showModalDialog('<c:url value="/admin/jobList.html" />',window,'status:no;resizable:no;directories:no;help:no;scroll:no;dialogWidth=400px;dialogHeight=350px;dialogLeft:500px;dialogTop:300px;');
																					        $('#project_name_'+this.getAttribute('projectIndex')).val(a.jobName);
																					        $('#project_name_'+this.getAttribute('projectIndex')).attr('jobId',a.jobId);
										 											  " />
								           </td>
								           <td colspan="5" width="55%" height="20" nowrap align="center" class="globalTextBold">
								           		目标：
								           		<input name="targetCount" id="targetCount" class="txtbox required digits" type="text" />
								           		<select>
								           			<option>次</option>
								           		</select>
								           </td>
								           <td colspan="1" width="20%" height="20" nowrap align="center" class="globalTextBold">
								           		<input projectIndex="" type="button" class="dynamic btnStyle" value="  删除  " onclick="javascript:delTask(this)">
								           </td>
								         </tr>
								       </table>
		                          	</td>
		                          </tr>
		                          
		                          <tr id="spacingTr">
		                          	<td colspan="2">
		                          		&nbsp;
		                          	</td>
		                          </tr>
							         
	</table>
</div>

<script type="text/javascript">
	
	var projectIndex=1;
	
	var taskIndex=1;
	
	function addProject(){
		var projectTr=$('#projectTr').clone(true);
		$(projectTr).attr("id","projectTr_"+projectIndex);
		$(projectTr).find(".dynamic").each(function(i){
			if($(this).attr("projectIndex")!=null){
				$(this).attr("projectIndex",projectIndex);
			}
		});
		$(projectTr).attr("projectIndex",projectIndex);
		$(projectTr).find("#project_name_")[0].setAttribute("id","project_name_"+projectIndex);
		$(projectTr).find("#project_name_"+projectIndex)[0].setAttribute("name","project_name_"+projectIndex);
		$(projectTr).find("#targetCount")[0].setAttribute("name","targetCount_"+projectIndex);
		
		
		$(projectTr).addClass("dataTr");
		$("#mainTable").append(projectTr);
		
		var spacingTr=$('#spacingTr').clone(true);
		$(spacingTr).attr("id","spacingTr_"+projectIndex);
		$("#mainTable").append(spacingTr);
		
		projectIndex++;
	}
	
	
	function delTask(delBtn){
		var trId='projectTr_'+$(delBtn).attr('projectIndex');
		$("#spacingTr_"+$(delBtn).attr('projectIndex')).remove();
		$("#"+trId).remove();
	}
	
	function jobListOnloadCallBack(subWindow){
		var subDocument=subWindow.document;
		$(subDocument).find('.delBtn').each(function(i){
			$(this).hide();
		});
		$(subDocument).find('.chooseBtn').each(function(i){
			$(this).show();
			$(this).bind("click",function(){
				subWindow.parent.window.returnValue={jobName:$(this).attr("jobName"),jobId:$(this).attr("jobId")};
				subWindow.close();
			});
		});
		$(subDocument).find('.editBtn').each(function(i){
			$(this).hide();
		});
	}
	
	
	
	function doSubmit(){
		
		if(!checkNull()){
			return;
		}
		
		var ar=new Array();
		
		var roleId=$("#selRole").val();
		
		$(".dataTr").each(function(i){
			var projectIndex=$(this).attr("projectIndex");
			var targetCount=$(this).find("#targetCount").val();
			var jobId=$("#project_name_"+projectIndex).attr("jobId");
			
			var permissionRoleAchievement=new PermissionRoleAchievement({
				targetCount:targetCount,
				roleId:roleId,
				jobId:jobId
			});
			ar.push(permissionRoleAchievement);
		});
		
		
		$.ajax(
	    		{
			    	type :'POST',
			    	url : 'newRoleTask.html', 
			        data: JSON.stringify(ar),   
			        dataType: 'text',  
			        contentType:'application/json;charset=UTF-8',
			        success:function(data){
			        	if(data=='ok'){
			        		alert('角色任务保存成功!');
			        		window.location='roleTaskList.html';
			        	}else{
			        		alert('角色任务保存失败!');
			        	}
			        }
	    		}
	        );   
	}
	
	
	function PermissionRoleAchievement(obj){
		this.targetCount=obj.targetCount;
		this.roleId=obj.roleId;
		this.jobId=obj.jobId;
	}
	
	
	
	function checkNull(){
		if($(".dataTr").length<1){
			alert('请添加任务目标');
			return false;
		}
		
		return $("#userRoleTaskForm").valid();		
	}
	
	
	$().ready(function() {
		var validate=$("#userRoleTaskForm").validate({
			showErrors: customShowErrors,
			onfocusout:false,
			onkeyup:false,
			onclick:false
		});
	});
	
	
</script>



